<template>
    <v-card
            v-if="comment.childComments"
            class="pl-10px"
            flat
    >
        <v-card-text
                v-for="childComment in comment.childComments.filter((childComment,index)=>index<childCommentShowNum)"
                class="pt-2px pb-0 black--text body-2">
            <!--{{childComment.no}}#--> <a>{{childComment.user.nickname}}</a>
            <span v-if="childComment.replyComment"> 回复 <a>{{childComment.replyComment.user.nickname}}</a></span>：
            <span @click="setChildComment(talk,comment,childComment)">{{childComment.content}}</span>
        </v-card-text>
        <v-card-actions v-show="comment.childComments.length>childCommentShowNum || showOtherCommentClicked" class="pt-2px pb-0">
            <v-btn text small color="orange" class="body-2" @click="toggleOtherComments">
                <span v-show="comment.childComments.length>childCommentShowNum">
                      查看其余{{comment.childComments.length- childCommentShowNum}}条回复
                        <v-icon>expand_more</v-icon>
                    </span>
                <span v-show="showOtherCommentClicked">
                      收起回复
                    <v-icon>expand_less</v-icon>
                 </span>
            </v-btn>
        </v-card-actions>
    </v-card>
</template>

<script lang="ts">
  import {Vue, Component, Prop, Watch} from 'vue-property-decorator'
  import Talk from "@/model/Talk"
  import TalkAPI from "@/views/talk/TalkAPI"
  import {namespace} from "vuex-class"
  import Comment from "@/model/Comment"

  const talkModule = namespace('talk')

  @Component({
    components: {}
  })
  export default class ChildComment extends Vue {
    @Prop() readonly talk: Talk
    @Prop() readonly comment: Comment
    @talkModule.State('currentContent') currentContent: any
    @talkModule.State('inputContentFocus') inputContentFocus: any

    childCommentLimitNum: number = 2
    showOtherCommentClicked: boolean = false


    toggleOtherComments() {
      if (this.showOtherCommentClicked) {
        this.childCommentLimitNum = 2
        this.showOtherCommentClicked = false
      } else {
        this.childCommentLimitNum = this.comment.childComments.length
        this.showOtherCommentClicked = true
      }
    }

    get childCommentShowNum() {
      return this.comment.childComments.length > this.childCommentLimitNum ? (this.childCommentLimitNum - 1) : this.childCommentLimitNum
    }

    get msgInputPlaceholder() {
      if (this.currentContent) {
        return '回复：' + this.currentContent
      } else {
        return '回复：此动态'
      }
    }

    setChildComment(talk, comment, childComment) {
      this.$store.commit('talk/setChildComment', {talk, comment, childComment})
    }

    promptDeleteContent() {
      if (this.$refs.msgInput.content) {
        this.$info('是否清空已输入内容').then(({result}) => {
          if (result) {
            this.$refs.msgInput.content = ''
          }
        })
      }
    }

    created() {

    }

    showUser(userId) {
      this.$router.push({
        name: 'userDetail',
        params: {
          userId: userId
        }
      })
    }

    followUser(userId) {
      this.$post('/follow/addFollow', 'beUserId=' + userId).then(res => {
      })
    }
  }
</script>
